<template>
  <div>
    <h3 style="padding-left: 10px;">系统访问情况</h3>
    <div id="reportSysVisitLog"></div>
  </div>
</template>

<script>
import { reqSysVisitLog } from "@/api/report/visitlog";

import Highcharts from "highcharts/highstock";
Highcharts.setOptions({
  lang: {
    resetZoom: "恢复缩放"
  }
});
export default {
  data() {
    return {
      chart: null,
      options: {
        chart: {
          zoomType: "x"
        },
        title: {
          text: ""
        },
        subtitle: {
          text:
            document.ontouchstart === undefined
              ? "鼠标拖动可以进行缩放"
              : "手势操作进行缩放"
        },
        lang: {
          resetZoom: "恢复缩放"
        },
        credits: {
          enabled: false
        },
        xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y"
          }
        },
        tooltip: {
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%Y-%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y"
          }
        },
        yAxis: {
          title: {
            text: "访问量"
          }
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          area: {
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, Highcharts.getOptions().colors[0]],
                [
                  1,
                  Highcharts.Color(Highcharts.getOptions().colors[0])
                    .setOpacity(0)
                    .get("rgba")
                ]
              ]
            },
            marker: {
              radius: 2
            },
            lineWidth: 1,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            threshold: null
          }
        },
        series: [
          {
            type: "area",
            name: "访问量",
            data: []
          }
        ]
      }
    };
  },
  components: {},
  mounted() {},
  created() {},
  methods: {
    async init(query) {
      let res = await reqSysVisitLog(query);
      if (res.code === 200) {
        this.options.series[0].data = res.data;
        this.showChart();
      }
    },
    showChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Highcharts.Chart("reportSysVisitLog", this.options);
    }
  }
};
</script>


<style lang="scss" scoped>
.h {
  text-align: center;
}
</style>